<template>
  <div class="container-pt">
    <van-nav-bar
      fixed
      title="修改用户资料"
      @click-left="$router.back()"
      left-arrow
    />

    <van-cell is-link title="头像" @click="showUploader">
      <van-uploader
        id="files"
        v-model="fileList"
        :before-read="beforeRead"
        v-show="false"
      ></van-uploader>
      <van-image
        width="30"
        height="30"
        round
        :src="'http://124.223.14.236:8060/' + userData.icon"
      />
    </van-cell>

    <!-- 弹出层 -->
    <van-popup v-model="active" style="height: 100%" position="bottom">
      <van-nav-bar
        :title="fieldList.title"
        left-text="取消"
        right-text="完成"
        @click-left="active = false"
        @click-right="editData"
      />
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        :maxlength="fieldList.maxlength"
        :placeholder="fieldList.placeholder"
        show-word-limit
        style="margin-top: 15px; height: 100px"
      />
    </van-popup>

    <van-cell
      is-link
      :value="userData.username"
      title="昵称"
      @click="usernameHandler"
    >
    </van-cell>

    <van-cell
      is-link
      :value="userData.mobile"
      title="手机号"
      @click="mobileHandler"
    ></van-cell>

    <!-- 选择性别 -->
    <van-cell is-link @click="showPicker = true" :value="sexVal" title="性别">
    </van-cell>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        title="请选择性别"
        show-toolbar
        :columns="columns"
        value-key="gender"
        @confirm="onConfirm"
        @cancel="showPicker = false"
        @change="onChange"
      />
    </van-popup>

    <!-- 选择日期 -->
    <van-cell
      is-link
      :value="dateVal"
      title="出生年月"
      @click="showDate = true"
    ></van-cell>
    <van-popup v-model="showDate" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirmDate"
        @cancel="showDate = false"
      />
    </van-popup>

    <!-- 修改家庭住址 -->
    <van-cell
      is-link
      :label="addressVal"
      title="家庭住址"
      @click="addressHandler"
    ></van-cell>
    <van-cell
      is-link
      :label="notesVal"
      title="个性留言"
      @click="notesHandler"
    ></van-cell>
  </div>
</template>

<script>
import { getUserInfoApi, userUpdateApi, fileApi } from "@/api/user.js";
export default {
  data() {
    return {
      active: false,
      showPicker: false,
      showDate: false,
      sexVal: "",
      sexId: "",
      columns: [
        { sex: 0, gender: "男" },
        { sex: 1, gender: "女" },
      ],
      userData: {},
      fileList: [],
      picSrc: "",
      message: "",
      fieldList: {
        title: "",
        placeholder: "",
        maxlength: "",
      },
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(1998, 2, 20),
      nowDate: "",
      dateVal: "",
      addressVal: "",
      notesVal: "",
    };
  },
  created() {
    this.renderUserData();
  },
  methods: {
    // 获取数据
    async renderUserData() {
      const { data } = await getUserInfoApi();
      // console.log(data);
      this.userData = data.userInfo;
      this.sexVal = this.userData.sex === 0 ? "男" : "女";
      this.dateVal = this.userData.birthday;
      this.addressVal = this.userData.address;
      this.notesVal = this.userData.notes;
    },

    // 修改昵称弹出层
    usernameHandler() {
      this.active = true;
      this.fieldList.title = "编辑昵称";
      this.fieldList.placeholder = "请输入昵称";
      this.fieldList.maxlength = "7";
      this.message = this.userData.username;
    },

    // 修改手机号弹出层
    mobileHandler() {
      this.active = true;
      this.fieldList.title = "编辑号码";
      this.fieldList.placeholder = "请输入手机号";
      this.fieldList.maxlength = "11";
      this.message = this.userData.mobile;
    },

    // 模拟点击文件
    showUploader() {
      document.querySelector("#files").click();
    },

    // 获取图片地址
    async beforeRead(file) {
      const fd = new FormData();
      fd.append("file", file);
      if (file.type.includes("image")) {
        const { data } = await fileApi("images", fd);
        this.userData.icon = data.savePath;
        await userUpdateApi({
          icon: this.userData.icon,
          id: this.userData.id,
        });
      }
    },

    async editData() {
      // 修改昵称
      if (this.fieldList.title === "编辑昵称") {
        //  修改昵称
        await userUpdateApi({
          username: this.message,
          id: this.userData.id,
        });
        this.userData.username = this.message;
        this.active = false;
        this.$toast("修改成功！");
      } else if (this.fieldList.title === "编辑号码") {
        // 修改号码
        await userUpdateApi({
          mobile: this.message,
          id: this.userData.id,
        });
        this.userData.mobile = this.message;
        this.active = false;
        this.$toast("修改成功！");
      } else if (this.fieldList.title === "编辑地址") {
        // 修改地址
        await userUpdateApi({
          address: this.message,
          id: this.userData.id,
        });
        this.addressVal = this.message;
        this.active = false;
        this.$toast("修改成功！");
      } else if (this.fieldList.title === "编辑个性留言") {
        await userUpdateApi({
          notes: this.message,
          id: this.userData.id,
        });
        this.notesVal = this.message;
        this.active = false;
        this.$toast("修改成功！");
      }
    },

    onChange(sexid, val) {
      this.sexId = val.sex;
    },
    // 上传性别
    async onConfirm(val) {
      this.sexVal = val.gender;
      await userUpdateApi({
        sex: this.sexId * 1,
        id: this.userData.id,
      });
      this.showPicker = false;
    },

    // 修改日期
    async onConfirmDate(val) {
      this.nowDate = `${+new Date(val).getFullYear()}-${
        +new Date(val).getMonth() + 1
      }-${+new Date(val).getDate()}`;
      this.dateVal = this.nowDate;
      await userUpdateApi({
        birthday: this.nowDate,
        id: this.userData.id,
      });
      this.showDate = false;
    },

    // 修改家庭住址
    addressHandler() {
      this.active = true;
      this.fieldList.title = "编辑地址";
      this.fieldList.placeholder = "请输入地址";
      this.fieldList.maxlength = "50";
      this.message = this.userData.address;
    },

    // 修改个性留言
    notesHandler() {
      this.active = true;
      this.fieldList.title = "编辑个性留言";
      this.fieldList.placeholder = "请输入留言";
      this.fieldList.maxlength = "30";
      this.message = this.userData.notes;
    },
  },
};
</script>

<style>
.container-pt .van-nav-bar__text {
  color: black;
  font-size: 30px;
}
.container-pt .van-popup {
  background-color: #f5f7f9;
}
</style>